<script>
import Taro from "@tarojs/taro";
import { reactive } from "vue";
import { useTzRouter } from "@/vhooks/useTzRouter";
import { getRocarsBundBeanByIdApi } from "./api";
import { getDicMap } from "@/utils/storage";
import { useButton } from "./useButton";

export default {
  name: "BundleInquireDetails",
  components: {},
  setup() {
    const state = reactive({
      rocarsBundBean: {},
    });

    const { redirectTo, route, EventChannel } = useTzRouter();
    const { userType } = getDicMap();
    const { bundId } = route.query;

    // 编辑页保存回退刷新
    EventChannel.on(route.path, (event) => {
      if (event?.type === "editBackRefresh") {
        // 刷新数据
        initData();
      }
    });

    const initData = () => {
      if (bundId) {
        state.bundId = bundId;
        const params = {
          bundId,
        };
        userType.isPersonal && (params.queryType = 1);

        Taro.showLoading({
          title: "加载中",
        });
        getRocarsBundBeanByIdApi(params)
          .then((res) => {
            Taro.hideLoading();
            const { rocarsBundBean } = res.data;

            const ccrnStr = rocarsBundBean.ccrnList;
            let ccrnArr = ccrnStr ? ccrnStr.split(",") : [];
            if (ccrnArr.length) {
              const rocarsListccrns = rocarsBundBean.rocarsList.map(
                (item) => item.ccrn
              );
              if (rocarsListccrns.length) {
                ccrnArr = ccrnArr.filter((item) => {
                  return !rocarsListccrns.includes(item);
                });
              }
            }
            rocarsBundBean.ccrnObjArr = ccrnArr;

            Object.assign(state.rocarsBundBean, rocarsBundBean);
            state.price = res.data.Price;
            state.totalMoney = res.data.TotalMoney;
            console.log(state.rocarsBundBean, 666);
          })
          .catch(() => {
            Taro.hideLoading();
          });
      }
    };
    // 首次加载数据
    initData();

    // 固定信息
    const useBaseInfo = () => {
      const { rocarsBundBean } = state;
      const { billStatusDic, ieTypeDic, passControlDic } = getDicMap();

      return (
        <tz-view class="info-box">
          <tz-view class="info-box-title">{`当前状态：${
            billStatusDic[rocarsBundBean.status]
          }`}</tz-view>
          <tz-view class="cell-content">
            <tz-cell border title="进/出口">
              {ieTypeDic[rocarsBundBean.type]}
            </tz-cell>
            <tz-cell border title="香港车牌">
              {rocarsBundBean.vrn}
            </tz-cell>
            <tz-cell border title="司机姓名">
              {rocarsBundBean.driverName}
            </tz-cell>
            <tz-cell border title="ROCARS帐号">
              {rocarsBundBean.rocarsId}
            </tz-cell>
            <tz-cell border title="司机联系方式">
              {rocarsBundBean.driverTel}
            </tz-cell>
            <tz-cell border title="六联单号">
              {rocarsBundBean.docCode}
            </tz-cell>
            <tz-cell border title="过关管制站">
              {passControlDic[rocarsBundBean.custompt]}
            </tz-cell>
            <tz-cell border title="货运日期">
              {rocarsBundBean.deparrdt}
            </tz-cell>
            <tz-cell border title="捆绑编号(UBR)">
              {rocarsBundBean.ubr}
            </tz-cell>
          </tz-view>
        </tz-view>
      );
    };

    // 货物信息
    const useGoodsInfoRender = () => {
      const { rocarsBundBean } = state;
      const { ieTypeDic } = getDicMap();

      return (
        <tz-view class="info-box">
          <tz-view class="info-box-title">货物信息</tz-view>
          <tz-view class="cell-content">
            {rocarsBundBean.ccrnObjArr &&
              !!rocarsBundBean.ccrnObjArr.length &&
              rocarsBundBean.ccrnObjArr.map((item, index) => (
                <tz-cell border title={`${index + 1}-CCRN->`}>
                  {item}
                </tz-cell>
              ))}

            {rocarsBundBean.rocarsList &&
              !!rocarsBundBean.rocarsList.length &&
              rocarsBundBean.rocarsList.map((item, index) => (
                <>
                  <tz-cell
                    border
                    title={`${
                      rocarsBundBean.ccrnObjArr.length + index + 1
                    }-CCRN->`}
                  >
                    {item.ccrn}
                  </tz-cell>
                  <tz-cell border title="进/出口">
                    {ieTypeDic[item.type]}
                  </tz-cell>
                  <tz-cell border title="提运单号">
                    {item.subDocCode}
                  </tz-cell>
                  <tz-cell border title="发货人">
                    {item.cnsgrName1}
                  </tz-cell>
                  <tz-cell border title="收货人">
                    {item.cnsgeName1}
                  </tz-cell>
                  <tz-cell border title="抵达日期">
                    {item.deparrdt}
                  </tz-cell>
                </>
              ))}
          </tz-view>
        </tz-view>
      );
    };

    // 补充信息
    const useRestInfo = () => {
      return (
        <tz-view class="info-box">
          <tz-view class="cell-content">
            <tz-cell class="rest" border title="账户余额">
              {state.totalMoney}
            </tz-cell>
            <tz-cell class="bind-cost" border title="捆绑费用">
              {state.price}
            </tz-cell>
          </tz-view>
        </tz-view>
      );
    };

    const btnRender = useButton(state, userType, useTzRouter);

    // 按条件展示信息
    const renderDetail = () => {
      const { rocarsBundBean } = state;
      const domList = [];

      if (Object.keys(rocarsBundBean).length) {
        // 基础信息
        domList.push(useBaseInfo());

        // 货物信息
        if (rocarsBundBean.ccrnObjArr && rocarsBundBean.ccrnObjArr.length > 0) {
          domList.push(useGoodsInfoRender());
        }

        if (userType.isPersonal) {
          domList.push(useRestInfo());
        }
        domList.push(btnRender());
      }
      return domList;
    };

    return () => {
      return <tz-view class="bundle-inquire-details">{renderDetail()}</tz-view>;
    };
  },
};
</script>

<style lang="scss">
.bundle-inquire-details {
  background-color: $white;
  padding-bottom: 30px;
  display: flex;
  flex-direction: column;
  padding-top: 6px;
  .info-box {
    display: flex;
    flex-direction: column;
    .info-box-title {
      font-size: 18px;
      padding-left: 10px;
      color: $primary-color;
      padding-top: 10px;
    }
    .cell-content {
      .tz-cell {
        font-size: 16px;
        line-height: 36px;
        padding-left: 20px;
        .tz-cell-label {
          font-size: 14px;
          color: $title-color3;
        }
        .tz-cell-value {
          .sub-content {
            margin-left: 10px;
            color: $primary-color;
          }
        }
      }
      .rest,
      .bind-cost {
        .tz-cell-value {
          color: $danger-color;
        }
      }
    }
  }
  .btn-area {
    display: flex;
    flex-direction: column;
    align-items: center;
    .tz-button {
      align-self: center;
      width: 345px;
      margin-top: 20px;
      height: 44px;
    }
    .btn-wrap {
      display: flex;
      flex-direction: column;
      width: 345px;
      &.abreast {
        flex-direction: row;
        justify-content: space-between;
        .tz-button {
          width: 48%;
        }
      }
    }
  }
}
</style>
